<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>jianli</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style>
    	.mui-bar .dust{
    		font-size: 14px;
    		color: #ff6700;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-pull-left dust" onclick="captureImage()">拍照</a>
		<a class="mui-icon mui-pull-right dust" onclick="galleryImgs()">相册</a>
		
		<h1 id="title" class="mui-title">mine</h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-mine.html">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">mine</span>
		</a>
		<a class="mui-tab-item" href="tab-webview-subpage-skill.html">
			<span class="mui-icon mui-icon-star"><!--<span class="mui-badge">9</span>--></span>
			<span class="mui-tab-label">skill</span>
		</a>
		<a class="mui-tab-item" href="tab-webview-subpage-project.html">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">project</span>
		</a>
		<a class="mui-tab-item" href="tab-webview-subpage-company.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">company</span>
		</a>
	</nav>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener("plusready", onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {
				console.log("plusready");
			}
			// 拍照
			function captureImage() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: " + res + ", Format: " + fmt);
				cmr.captureImage(function(path) {
						savePicture(path);
					},
					function(error) {

					}, {
						resolution: res,
						format: fmt
					});
			}
			function savePicture(path) {
				plus.gallery.save( path, function () {
					alert( "保存图片到相册成功" );
				} );
			}
			function galleryImgs() {
				// 从相册中选择图片
				console.log("从相册中选择多张图片:");
				plus.gallery.pick(function(e) {
					for(var i in e.files) {
						
						console.log(e.files.length);
					}
					alert("已选择"+e.files.length + "张图片");
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true
				});
			}
			
		</script>

	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	var subpages = ['tab-webview-subpage-mine.html', 'tab-webview-subpage-skill.html', 'tab-webview-subpage-project.html', 'tab-webview-subpage-company.html'];
		var subpage_style = {
			top: '45px',
			bottom: '51px'
		};
		
		var aniShow = {};
		
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < 4; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
		 //当前激活选项
		var activeTab = subpages[0];
		var title = document.getElementById("title");
		 //选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//更换标题
			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		 //自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
    </script>
</body>
</html>